
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Drag Drop</title>

<!-- Script Links : Jquery and Jquery UI (JQUERY) -->
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/start/jquery-ui.css" />

<link rel="stylesheet" href="jquery.organizer.css" />
<script type="text/javascript" language="javascript" src="jquery.organizer.js" ></script>

<style>

	</style>
	<script>
$(document).ready(function() {

$('#dropJson').organize({
	height: "600px",
	width: "100%",
	icons: {
		open : "ui-icon-circle-plus",
		close : "ui-icon-circle-minus"
	},
	columns: [
			{id:'N',title:'New Task'},
			{id:'H',title:'Important Task'},
			{id:'A',title:'Active Task'},
			{id:'C',title:'Completed Task'},
		
		],
	edit: {	
		url: "edit.htm?key=",
	    urlAppend: "&dialog=taskEditor", 
        dialog: {
				id: "taskEditor",
				title: "Task Editor",
				width: 500,
				height: 370  
			} 
		},    
	task: {			
			data: [
				{id:'task1',title:'Task 1',content:'Drag<br><br>me<br><br>to<br>my<br>target<br>1',code:'A'},
				{id:'task2',title:'Task 2',content:'Drag<br><br>me<br><br>to<br>my<br>target<br>2',code:'A'},
				{id:'task3',title:'Task 3',content:'Drag<br><br>me<br><br>to<br>my<br>target<br>3',code:'N'},
				{id:'task4',title:'Task 4',content:'Drag<br><br>me<br><br>to<br>my<br>target<br>4',code:'N'},
				{id:'task5',title:'Task 5',content:'Drag<br><br>me<br><br>to<br>my<br>target<br>5',code:'C'}
			]
		}
	
	});

	$( ".draggable" ).draggable({ snap: true });
	
});	</script>
</head>

<body class="" style="margin-top: 5; margin-bottom: 0; margin-left: 30; margin-right: 50; background-color: #333;">

<div id="dropJson"  class="ui-widget-content ui-corner-all" style="width:10px; height:10px;">
</div>





</body>
</html>
